<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body_content">
        <f:event type="preRenderView"  listener="#{marchamoFacadeManaged.limpiarSession()}" />
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg">Sistema de Información Vehicular | Crear marchamo</h3>
        <h:message for="Campos"  id="javax_faces_developmentstage_messages"></h:message>
        <!--Info Usuario-->
        <ice:form id="Campos">
            <!--Ace tabs-->
            <ace:tabSet  clientSide="true" styleClass="panel-principal">
                
                
               
                <ace:tabPane id="panelMarchamo" label="Paso 1. Información Marchamo" styleClass="no-margin-top" >
                    <ace:panel styleClass="contenedorDatos" >
                        <p style="font-weight: bold; text-align: left" class="no-margins">Por favor ingrese los datos del marchamo solicitados acontinuación</p>
                        <h:panelGrid columns="1" width="75%" styleClass="centeredPanelGrid">

                            <!--<ace:textEntry id="marchamo" value="#{marchamoFacadeManaged.marchamoLocal.idMarchamo}" label="ID Marchamo" labelPosition="left" 
                                            required="false" requiredIndicator="(*)" indicatorPosition="right">
                              </ace:textEntry>-->
                            <ice:outputText styleClass="numero_marchamo" value="Marchamo ##{marchamoFacadeManaged.consultaConsecutivo()}"/> 
                            

                            
                            <img class="img_style" src="img/new_icons/marchamo.png" alt="marchamo"/>            
                            <ace:textEntry id="fechaCreacion" readonly="true"   value="#{marchamoFacadeManaged.marchamoLocal.fechaActual}" label="Fecha de Creación:" labelPosition="left" >
                                <f:convertDateTime pattern="#{marchamoFacadeManaged.marchamoLocal.pattern}"/>
                            </ace:textEntry>

                            <ace:dateTimeEntry id="fecha2"
                                               value="#{marchamoFacadeManaged.marchamoLocal.fechaVigencia}"
                                               timeZone="Canada/Mountain"
                                               pattern="dd/MM/yyyy"
                                               renderAsPopup="true"
                                               label="Fecha de Vigencia: "
                                               labelPosition="left"
                                               required="true" requiredIndicator="(*)"/>
                            
                            <ice:selectOneMenu id="tipoMarchamo" value="#{marchamoFacadeManaged.marchamoLocal.tipoMarchamo}" required="true">
                                <label for="tipoMarchamo" class="combo-lb4">Tipo Marchamo: </label>
                                <f:selectItem itemLabel="Seleccione un tipo de marchamo"
                                              noSelectionOption="true" />
                                <f:selectItems value="#{tipoMarchamoFacadeManaged.listaTiposMarchamos}"/>                         
                            </ice:selectOneMenu>

                            <ice:selectOneRadio  style="float:left;" id="estadoMarchamo" value="#{marchamoFacadeManaged.marchamoLocal.estadoMarchamo}" required="true">
                                <label style="float:left;" for="estadoMarchamo" class="combo-lb4">Estado : </label>
                                <f:ajax disabled="false"/>
                                <f:selectItem  itemValue="1" itemLabel="Activo"/>
                                <f:selectItem itemValue="0" itemLabel="Inactivo"/>                               
                            </ice:selectOneRadio>

                        </h:panelGrid>
                    </ace:panel>

                </ace:tabPane>

                <ace:tabPane id="panelUsuario" label="Paso 2. Información Usuario" styleClass="no-margin-top" >
                    <!--Ace tabs-->

                    <ace:panel styleClass="contenedorDatos" >
                        <!--                <p class="help-box">Ingrese los datos del usuario a la izquierda.<span class="strong"> Los campos marcados con (*) son requeridos.</span></p>-->
                        <h:panelGrid columns="1" width="100%" styleClass="centeredPanelGrid">
                            <p style="font-weight: bold; text-align: left" class="no-margins">Por favor ingrese los datos del usuario solicitados a continuación</p>
                            
                            <img class="img_style" src="img/new_icons/user.png" alt="usuario"/>           
                            
                            <h:graphicImage class="ico-label" value="img/ico/vcard.png" alt="cedula"/>
                            <ace:textEntry id="cedula" value="#{usuarioFacadeManaged.usuarioLocal.cedula}" label="Cédula ó Pasaporte" labelPosition="left" 
                                           required="true" requiredIndicator="(*)" indicatorPosition="right" maxlength="9">
                                <f:validateRegex pattern="\w{3,9}"/>
                            </ace:textEntry>
                            <h:message for="cedula" style="color:red"/>

                            <h:graphicImage class="ico-label" value="img/ico/user.png" alt="nombre"/>

                            <ace:textEntry id="nombre1" value="#{usuarioFacadeManaged.usuarioLocal.nombre1}" label="Primer Nombre" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                            </ace:textEntry>
                            <h:message for="nombre1" style="color:red" />

                            <ace:textEntry id="nombre2" value="#{usuarioFacadeManaged.usuarioLocal.nombre2}" label="Segundo Nombre" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                                <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                            </ace:textEntry>
                            <h:message for="nombre2" style="color:red" />


                            <ace:textEntry id="apellido1" value="#{usuarioFacadeManaged.usuarioLocal.apellido1}" label="Primer Apellido" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                            </ace:textEntry>
                            <h:message for="apellido1" style="color:red" />

                            <ace:textEntry id="apellido2" value="#{usuarioFacadeManaged.usuarioLocal.apellido2}" label="Segundo Apellido" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                            </ace:textEntry>
                             <h:message for="apellido2" style="color:red" />


                            <h:graphicImage class="ico-label" value="img/ico/phone.png" alt="telefono"/>


                            <ace:textEntry id="telefono1" value="#{usuarioFacadeManaged.usuarioLocal.telefono1}" validatorMessage="Digite el teléfono" label="Teléfono 1" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right" maxlength="8"> 
                            <f:validateLength minimum="4" maximum="8"/>
                            </ace:textEntry>
                            <h:message for="telefono1" style="color:red" />

                            <ace:textEntry id="telefono2" value="#{usuarioFacadeManaged.usuarioLocal.telefono2}" label="Teléfono 2" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right" maxlength="8">
                           <f:validateLength minimum="4" maximum="8"/>
                            </ace:textEntry>
                            <h:message for="telefono2" style="color:red" />

                            <h:graphicImage class="ico-label" value="img/ico/email.png" alt="email"/>

                            <ace:textEntry id="email" value="#{usuarioFacadeManaged.usuarioLocal.correoElectronico}" label="Correo Electrónico" labelPosition="left" required="true"   optionalIndicator="(*)" indicatorPosition="right">
                                <f:validateRegex pattern="\w+@[a-z]+\.[a-z]{1,4}"/>
                            </ace:textEntry>
                              <h:message for="email" style="color:red" />

                              <ice:selectOneRadio  style="float:left;" id="sexo" value="#{usuarioFacadeManaged.usuarioLocal.sexo}" required="true">
                                <label style="float:left;" for="sexo" class="combo-lb4">Sexo : </label>
                                <f:ajax disabled="false"/>
                                <f:selectItem itemValue="M" itemLabel="Masculino" />
                                <f:selectItem itemValue="F" itemLabel="Femenino"/>                               
                            </ice:selectOneRadio>
                             

                            <ice:selectOneMenu id="estadoCivil" value="#{usuarioFacadeManaged.usuarioLocal.estadoCivil}" styleClass="combo-civil">
                                <label for="estadoCivil" class="combo-lb4">Estado Civil: </label>
                                <f:selectItem itemLabel="Seleccione..."
                                              noSelectionOption="true" />
                                <f:selectItem itemLabel="Soltero(a)" itemValue="Soltero" />
                                <f:selectItem itemLabel="Casado(a)" itemValue="Casado" />
                                <f:selectItem itemLabel="Unión libre" itemValue="Union_libre" />
                                <f:selectItem itemLabel="Divorciado(a)" itemValue="Divorciado" />
                                <f:selectItem itemLabel="Viudo(a)" itemValue="Viudo" />
                            </ice:selectOneMenu>

                            <h:graphicImage class="ico-label" value="img/ico/building.png" alt="work"/>                                                                                     
                            <ice:selectOneMenu id="lugarDeTrabajo" value="#{usuarioFacadeManaged.usuarioLocal.centroTrabajoEscuela}">
                                <label for="lugarDeTrabajo" class="combo-lb4">Centro Trabajo: </label>
                                <f:selectItems value="#{centroTrabajoEscuelaFacadeManaged.listaCentrosTrabajosEscuelas}"/>

                            </ice:selectOneMenu>                                                          



                        </h:panelGrid>

                        <!--TOOLTIPS-->
                        <ace:tooltip id="tooltipNombre"
                                     for="nombre1"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:graphicImage  id="img0" value="" alt=""/>
                                <h:outputText id="desc0" value="Nombre no debe contener números"/>
                            </h:panelGrid>   
                        </ace:tooltip>


                        <ace:tooltip id="tooltipCedula"
                                     for="cedula"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc1" value="Cédula no debe tener guiones ni espacios en blanco. Ejemplo: 113630159"/>
                            </h:panelGrid>   
                        </ace:tooltip>

                        <ace:tooltip id="tooltipTelefono"
                                     for="telefono1"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc2" value="Teléfono tiene 8 dígitos. No digite guiones ni espacios. Ej. 89184490"/>
                            </h:panelGrid>   
                        </ace:tooltip> 

                        <ace:tooltip id="tooltipEmail"
                                     for="email"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc3" value="Ejemplo: usuario@una.ac.cr"/>
                            </h:panelGrid>   
                        </ace:tooltip> 

                        <ace:tooltip id="tooltipWorkplace"
                                     for="lugarDeTrabajo"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc4" value="Seleccione un lugar de contacto para el usuario"/>
                            </h:panelGrid>   
                        </ace:tooltip>

                    </ace:panel>
                    <!--TOOLTIPS usuario-->
                </ace:tabPane>

                <!--FIN INFO USUARIO-->  

                <!--Info Vehiculo-->
                <ace:tabPane id="panelVehiculo" label="Paso 3. Información Vehículo">
                    
                    <ace:panel styleClass="contenedorDatos" >
                    <!-- Panel Grid Vehiculo -->
                    <h:panelGrid columns="1" width="100%" styleClass="centeredPanelGrid" >
                        <!--        <h:form id="textEntryFormCAR" styleClass="dataEntryForm">-->
                        <ace:panel id="carInputPanel" styleClass="contenedorDatos">
                            
                            <img class="img_style" src="img/new_icons/car2.png" alt="vehiculo"/>
                            <!--                <p class="help-box">Por favor rellene los campos del formulario de la izquierda. <span class="strong">Los campos marcados con (*) son requeridos.</span></p>-->
                            <h:panelGrid id="inputGrid2" columns="1" width="100%" >
                                <p style="font-weight: bold; text-align: left" class="no-margin-top">Ingrese aquí la información del vehículo. Cuando haya terminado presione el botón guardar marchamo.</p>
                                <ace:textEntry id="placaVehiculo" value="#{vehiculoFacadeManaged.vehiculoLocal.placa}" label="Placa:" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right" maxlength="9">                        
                                <f:validateRegex pattern="\w{3,9}"/>
                                </ace:textEntry>
                                <h:message for="placaVehiculo" style="color:red" />

                                <ice:selectOneMenu id="marcaVehiculo" value="#{vehiculoFacadeManaged.vehiculoLocal.marca}">
                                    <label for="marcaVehiculo" class="combo-lb2">Marca: </label>
                                    <f:selectItems value="#{marcaFacadeManaged.listaMarcas}" />
                                </ice:selectOneMenu>

                                <ice:selectOneMenu id="modeloVehiculo" value="#{vehiculoFacadeManaged.vehiculoLocal.modelo}">
                                    <label for="modeloVehiculo" labelPosition="left"  class="combo-lb3">Modelo: </label>
                                    <f:selectItems value="#{modeloFacadeManaged.listaModelos}" />

                                </ice:selectOneMenu>



                                <ice:selectOneMenu id="anioVehiculo" value="#{vehiculoFacadeManaged.vehiculoLocal.anoFabricacion}">
                                    <label for="anioVehiculo" class="combo-lb2">Año: </label>
                                    <f:selectItem itemLabel="1960" itemValue="1960" />
                                    <f:selectItem itemLabel="1961" itemValue="1961" />
                                    <f:selectItem itemLabel="1962" itemValue="1962" />
                                    <f:selectItem itemLabel="1963" itemValue="1963" />
                                    <f:selectItem itemLabel="1964" itemValue="1964" />
                                    <f:selectItem itemLabel="1965" itemValue="1965" />
                                    <f:selectItem itemLabel="1966" itemValue="1966" />
                                    <f:selectItem itemLabel="1967" itemValue="1967" />
                                    <f:selectItem itemLabel="1968" itemValue="1968" />
                                    <f:selectItem itemLabel="1969" itemValue="1969" />
                                    <f:selectItem itemLabel="1970" itemValue="1970" />
                                    <f:selectItem itemLabel="1971" itemValue="1971" />
                                    <f:selectItem itemLabel="1972" itemValue="1972" />
                                    <f:selectItem itemLabel="1973" itemValue="1973" />
                                    <f:selectItem itemLabel="1974" itemValue="1974" />
                                    <f:selectItem itemLabel="1975" itemValue="1975" />
                                    <f:selectItem itemLabel="1977" itemValue="1977" />
                                    <f:selectItem itemLabel="1978" itemValue="1978" />
                                    <f:selectItem itemLabel="1979" itemValue="1979" />
                                    <f:selectItem itemLabel="1980" itemValue="1980" />
                                    <f:selectItem itemLabel="1981" itemValue="1981" />
                                    <f:selectItem itemLabel="1982" itemValue="1982" />
                                    <f:selectItem itemLabel="1983" itemValue="1983" />
                                    <f:selectItem itemLabel="1984" itemValue="1984" />
                                    <f:selectItem itemLabel="1985" itemValue="1985" />
                                    <f:selectItem itemLabel="1986" itemValue="1986" />
                                    <f:selectItem itemLabel="1987" itemValue="1987" />
                                    <f:selectItem itemLabel="1988" itemValue="1988" />
                                    <f:selectItem itemLabel="1989" itemValue="1989" />
                                    <f:selectItem itemLabel="1990" itemValue="1990" />
                                    <f:selectItem itemLabel="1991" itemValue="1991" />
                                    <f:selectItem itemLabel="1992" itemValue="1992" />
                                    <f:selectItem itemLabel="1993" itemValue="1993" />
                                    <f:selectItem itemLabel="1994" itemValue="1994" />
                                    <f:selectItem itemLabel="1995" itemValue="1995" />
                                    <f:selectItem itemLabel="1996" itemValue="1996" />
                                    <f:selectItem itemLabel="1997" itemValue="1997" />
                                    <f:selectItem itemLabel="1998" itemValue="1998" />
                                    <f:selectItem itemLabel="1999" itemValue="1999" />
                                    <f:selectItem itemLabel="2000" itemValue="2000" />
                                    <f:selectItem itemLabel="2001" itemValue="2001" />
                                    <f:selectItem itemLabel="2002" itemValue="2002" />
                                    <f:selectItem itemLabel="2003" itemValue="2003" />
                                    <f:selectItem itemLabel="2004" itemValue="2004" />
                                    <f:selectItem itemLabel="2005" itemValue="2005" />
                                    <f:selectItem itemLabel="2006" itemValue="2006" />
                                    <f:selectItem itemLabel="2007" itemValue="2007" />
                                    <f:selectItem itemLabel="2008" itemValue="2008" />
                                    <f:selectItem itemLabel="2009" itemValue="2009" />
                                    <f:selectItem itemLabel="2010" itemValue="2010" />
                                    <f:selectItem itemLabel="2011" itemValue="2011" />
                                    <f:selectItem itemLabel="2012" itemValue="2012" />  
                                    <f:selectItem itemLabel="2013" itemValue="2013" />          
                                    <f:selectItem itemLabel="2014" itemValue="2014" /> 
                                    <f:selectItem itemLabel="2015" itemValue="2015" />
                                    <f:selectItem itemLabel="2016" itemValue="2016" />
                                    <f:selectItem itemLabel="2017" itemValue="2017" />
                                    <f:selectItem itemLabel="2018" itemValue="2018" />
                                    <f:selectItem itemLabel="2019" itemValue="2019" />
                                    <f:selectItem itemLabel="2020" itemValue="2020" />
                                    <f:selectItem itemLabel="2021" itemValue="2021" />
                                    <f:selectItem itemLabel="2022" itemValue="2022" />
                                    <f:selectItem itemLabel="2023" itemValue="2023" />
                                    <f:selectItem itemLabel="2024" itemValue="2024" />
                                    <f:selectItem itemLabel="2025" itemValue="2025" />
                                    <f:selectItem itemLabel="2026" itemValue="2026" />
                                    <f:selectItem itemLabel="2027" itemValue="2027" />
                                                 
                                </ice:selectOneMenu>

                                <ice:selectOneMenu id="colorVehiculo" value="#{vehiculoFacadeManaged.vehiculoLocal.color}">
                                    <label for="colorVehiculo" class="combo-lb3">Color: </label>
                                    <f:selectItems value="#{colorFacadeManaged.listaColores}"/>
                                    <!--<f:converter converterId="ColorConverter"/>-->

                                </ice:selectOneMenu>
                                
                                <ace:textEntry id="cedulaPropietario" value="#{vehiculoFacadeManaged.vehiculoLocal.cedulaPropietario}" label="Cedula ó Pasaporte del Propietario:" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right" maxlength="9">
                                <f:validateRegex pattern="\w{3,9}"/>
                                </ace:textEntry>
                                <h:message for="cedulaPropietario" style="color:red" />
                                
                                <ace:textEntry id="nombrePropietario" value="#{vehiculoFacadeManaged.vehiculoLocal.nombrePropietario}" label="Nombre Propietario:" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                 <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                                </ace:textEntry>
                                 <h:message for="nombrePropietario" style="color:red" />
                                
                                <ace:textEntry id="apellidoPropietario" value="#{vehiculoFacadeManaged.vehiculoLocal.apellidoPropietario}" label="Apellidos Propietario:" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                 <f:validateRegex pattern="^[a-zñÑA-Z]*$"/>
                                </ace:textEntry>
                                 <h:message for="apellidoPropietario" style="color:red" />
                            </h:panelGrid>

                            <h:panelGrid styleClass="centeredPanelGrid">
                                <!--                    <ace:pushButton id="save" action="confirmation.show()">Crear marchamo</ace:pushButton>-->
                               
                                <h:commandButton id="save" styleClass="botonEnviar" value="Guardar Marchamo" onclick="confirmation.show()" type="button" class="save" />                               
                                <ice:message for="save" id="menssage_save" errorStyle="color:red;" infoStyle="color:blue;"/>
                                <ice:panelConfirmation>
                                    
                                </ice:panelConfirmation>
                            </h:panelGrid>
                            <ace:confirmationDialog id="confirmDialog"
                                                    widgetVar="confirmation"
                                                    message="Seguro(a) que desea guardar esta información?"
                                                    header="Confirmación"
                                                    width="450"
                                                    height="200"
                                                    modal="false"
                                                    closeOnEscape="true"
                                                    closable="true"
                                                    position="center"
                                                    styleClass="dialog-margin">
                                <h:panelGrid columns="2" styleClass="centeredPanelGrid">
                                    <h:commandButton id="yes" value="Sí" onclick="confirmation.hide()" actionListener="#{marchamoFacadeManaged.guardar}"/>
                                    <h:commandButton id="no" value="No" onclick="confirmation.hide()" action="#{marchamoFacadeManaged.doNothing}" />
                                </h:panelGrid>
                            </ace:confirmationDialog>

                        </ace:panel>

                        <!-- Tooltips Vehiculo -->

                        <ace:tooltip id="tooltipPlaca"
                                     for="placaVehiculo"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc5" value="Sin guiones ni espacios. Ejemplo: BXH432 ó 540321"/>
                            </h:panelGrid>   
                        </ace:tooltip>

                        <ace:tooltip id="tooltipModelo"
                                     for="modeloVehiculo"
                                     speechBubble="true"
                                     showEffect="slide"
                                     hideEffect="grow"
                                     showDelay="500"
                                     hideDelay="300"
                                     position="bottomLeft"
                                     targetPosition="topRight"
                                     showEffectLength="300"
                                     hideEffectLength="300">
                            <h:panelGrid styleClass="tooltipBoxStyle"> 
                                <h:outputText id="desc6" value="Ejemplo: Elantra" />
                            </h:panelGrid>   
                        </ace:tooltip>


                        <!-- Tooltips Vehiculo -->
                    </h:panelGrid>
                    
                    </ace:panel>
                </ace:tabPane>        
                <!--Info Vehiculo-->
               
            </ace:tabSet>

        </ice:form>

    </ui:define>
</ui:composition>